<template>
    <div ref="scrollContainer" class="scroll-container">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
import {onMounted, onUnmounted, ref} from "vue";
import {UseMarquee, useMarquee} from "@/widget/use/use-marquee";

/**
 * 垂直跑马灯
 */
interface Props extends /* @vue-ignore */ UseMarquee {
    // 跑马灯速度（像素/秒）
    speed: number;
}

// 使用 withDefaults 设置默认值
const props = withDefaults(defineProps<Props>(), {
    speed: 0.5,
})

// Reference container
const scrollContainer = ref();

// marquee setting
const {bind, unbind} = useMarquee(props);

onMounted(() => {
    bind(scrollContainer.value);
})

onUnmounted(() => {
    unbind();
})

</script>

<style scoped lang="scss">
.scroll-container {
    overflow-y: auto;

    scrollbar-width: none; /* Firefox 隐藏滚动条 */
    -ms-overflow-style: none; /* IE/Edge 隐藏滚动条 */
}

/* WebKit 浏览器（Chrome/Safari/Edge）隐藏滚动条 */
.scroll-container::-webkit-scrollbar {
    display: none;
}
</style>